
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div id="msg">{{msg}}</div>
    <button @click='update'>更新</button>
    <button @click='destroy'>销毁</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      Vue实例的生命周期

      就是在实例在创建到存活以及销毁的过程中自动执行的一些函数
      
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '测试'
      },
      methods: {
        update: function(){
          this.msg = 'hello';
        },
        destroy: function(){
          this.$destroy();
        }
      },
      // 创建
      // 已经开始创建对象
      beforeCreate: function(){
        console.log(this.msg)
        console.log('beforeCreate');
      },
      // 实例对象已经创建完成
      // el的区域还未创建
      created: function(){
        // this.update()
        // 发送请求
        console.log(this.msg)
        console.log(this.update)
        console.log(this.$el)
        console.log('created');
      },
      // el的区域 已经创建了，还为渲染完成
      beforeMount: function(){
        console.log(this.$el)
        console.log('beforeMount')
      },
      // el的区域 渲染完成
      mounted: function(){
        // 最早可以操作dom
        console.log(this.$el)
        console.log('mounted')
      },
      // 生存 （更新）
      // 数据发生了更新
      // 数据更新 1. 数据更新   
      beforeUpdate: function(){
        console.log(this.msg)
        console.log(document.getElementById('msg').innerHTML)
        console.log('beforeUpdate');
      },
      // 2. 页面更新
      updated: function(){
        console.log('updated');
        console.log(this.msg)
        console.log(document.getElementById('msg').innerHTML)
      },
      // 销毁
      // 销毁之前
      beforeDestroy: function(){
        console.log('beforeDestroy');
      },
      // 真正销毁
      destroyed: function(){
        console.log('destroyed');
      }
    });
  </script>
</body>
</html>
